<template>
  <div style="text-align: left">
    <a-input-search placeholder="请输入名称关键字" style=" width: 200px" @search="onSearch" v-model="keyword"/>
    <br />
    <a-table bordered :data-source="list" :columns="columns"  rowKey='customer' :pagination="paginationOpt">
      <template slot="name"> </template>
    </a-table>
    <div id="myChart" :style="{width: '600px', height: '300px', clear:'both',float:'left',top:'20px'}"></div>
  </div>

</template>

<script>
    import axios from 'axios'
    export default {
        name: 'customer',
        data: function () {
            return  {
                wareHouseUrl:this.baseURL+"customer.ctl",
                logoutUrl:this.baseURL+"logout.ctl",
                list:[],
                obj:{},
                keyword:'',
                selectkey:'',
              chartsdata: [0, 0],
              chartseries: ['男','女'],
                columns: [
                    {
                        title: '序号',
                        customRender: function(t, r, index) {
                            return parseInt(index) + 1
                        },
                    },
                    {
                        title: '顾客姓名',
                        dataIndex: 'name',
                    },
                    {
                        title: '顾客性别',
                        dataIndex: 'sex'

                    },
                    {
                        title: '个性签名',
                        dataIndex: 'signature'

                    },
                    {
                        title: '联系方式',
                        dataIndex: 'phoneNumber'

                    },
                    {
                        title: '住址',
                        dataIndex: 'address'

                    }

                ],
                addVisible:false,
                logoutVisible:false,
                editVisible:false,
                // 分页
                paginationOpt: {
                    defaultCurrent: 1, // 默认当前页数
                    defaultPageSize: 5, // 默认当前页显示数据的大小
                    total: 0, // 总数，必须先有
                    showSizeChanger: true,
                    showQuickJumper: true,
                    pageSizeOptions: ["5", "10", "15", "20"],
                    showTotal: (total) => `共 ${total} 条`, // 显示总数
                    onShowSizeChange: (current, pageSize) => {
                        this.paginationOpt.defaultCurrent = 1;
                        this.paginationOpt.defaultPageSize = pageSize;
                        //this.searchCameraFrom(); //显示列表的接口名称
                    },
                    // 改变每页数量时更新显示
                    onChange: (current, size) => {
                        this.paginationOpt.defaultCurrent = current;
                        this.paginationOpt.defaultPageSize = size;
                        //this.searchCameraFrom();
                    },
                }
            }
        },
      mounted () { // mounted钩子函数是组件挂载后执行，时间上比created要晚
        this.getList()
        this.getSchoolList()// 获取树结构的初始化父节点数据
      },
        methods: {
          getList () {
            var _this = this
            axios.get(this.wareHouseUrl).then((res) => {
              _this.list = res.data
              // console(res.dat)
              _this.chartsdata = [0, 0]
              _this.list.forEach(function (item, i) {
                _this.chartseries.forEach(function (o, i) {
                  if (item.sex == o) {
                    _this.chartsdata[i]++
                  }
                })
              })
              this.drawLine()
            })
          },
          drawLine () {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
              title: {
                text: '顾客男女比例',
                left: 'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              legend: {
                orient: 'vertical',
                left: 'left',
                data: this.chartseries
              },
              series: [
                {
                  name: '性别',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '60%'],
                  data: [
                    {value: 2, name: '男'},
                    {value: 1, name: '女'}
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            })
          },
            getSchoolList(){
                var arr = this;
                if(this.selectkey!='')
                    axios.get(this.wareHouseUrl+"?"+this.selectkey).then((response) => {//根据选中的节点改变教师对象列表
                        arr.list=response.data;
                    })
                else
                    axios.get(this.wareHouseUrl).then((response) => {
                        arr.list=response.data;
                    })
            },
            showModal1() {
                this.addVisible = true;
                this.obj={};

            },
            showModal2(obj) {
                this.editVisible = true;
                this.obj=obj;

            },
            showModal3() {
                this.logoutVisible = true;
                this.obj={};
            },
            logout(){
                axios.get(this.logoutUrl).then((res)=>{
                    alert(res.data.message);
                    this.obj={}
                })
                this.logoutVisible=false;
                this.$router.push('/')
            },
            edit:function (id){
                axios.put(this.wareHouseUrl,this.obj).then((res)=>{
                    alert(res.data.message);
                    this.obj={}
                });
                this.editVisible=false;
                this.getSchoolList();
            },
            onDelete(id){
                axios.delete(this.wareHouseUrl+"?id="+id).then(res => { //这里后台有错，有专业数据的学院删不掉，也提示删除成功
                    alert(res.data.message);
                    this.getSchoolList();
                })

            },
            handleAdd(){
                axios.post(this.wareHouseUrl,this.obj).then((res)=>{
                    alert(res.data.message);
                    this.obj={}
                })
                this.addVisible=false;
                this.getSchoolList();

            },
            onSearch(){
                var arr = this;
                //需要后台对每一个字段做模糊查询
                axios.get(this.wareHouseUrl+"?id="+this.keyword).then((response) => {
                    arr.list=response.data;

                })
            }
        },
        created(){
            this.getSchoolList();
        }
    }
</script>

<style scoped>
  table{
    margin-top:50px;
    width:90%;
  }
  tr{
    line-height: 40px;
  }
  td{border-bottom: solid 1px #eee;}

  div p{ line-height: 50px;}
  div p input {line-height: 28px;}

</style>
